<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { useIcon } from '@/hooks/web/useIcon'
import { reactive, watch, ref } from 'vue'

import {
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElCol,
  ElTree,
  ElButton,
  ElDivider
} from 'element-plus'

const { t } = useI18n()

const addIcon = useIcon({ icon: 'gala:add' })
const delIcon = useIcon({ icon: 'material-symbols:delete-outline' })

const props = defineProps({
  currentRow: {
    type: Object as any,
    default: () => null
  }
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    form.id = currentRow.id
    form.rules = currentRow.rules
    form.name = currentRow.name

    // currentRow.price_range.length > 0 ? (form.wayArr = currentRow.price_range) : ''
    // let goodsStr = JSON.stringify(currentRow.price_range)
    // console.log(goodsStr)
    // goodsStr = goodsStr.replace(/&quot;/g, '"')
    // let goodsArr: any = JSON.parse(goodsStr)
    // goodsArr.forEach((item, i) => {
    //   let copyItem = JSON.parse(JSON.stringify(item))
    //   // }
    //   form.wayArr.push(copyItem)
    // })
    let treeData = currentRow.rules
    // console.log(treeData, 'treeData')
    treeRef.value!.setCheckedKeys(treeData, false)
  }
)

// 表单对应的字段（绑定到输入框以及选择框俄字段）
const form: any = reactive({
  id: '',
  name: '',
  rules: '',
  wayArr: [
    {
      Zlist: [
        {
          name: '',
          min: '',
          max: ''
        }
      ],
      Tlist: [
        {
          name: '',
          min: '',
          max: ''
        }
      ]
    }
  ]
})

const addWayListItem = (pIndex, index, type) => {
  let wListItem = {
    name: '',
    min: '',
    max: ''
  }
  form.wayArr[pIndex][type].push(wListItem)
}

const removeWayListItem = (pIndex, index, type) => {
  form.wayArr[pIndex][type].splice(index, 1)
}

defineExpose({
  getFormData: () => {
    return form
  }
})
const adminData = ref([
  {
    id: '1',
    label: '基础参数设置',
    children: [
      {
        id: '2',
        label: '始发地',
        children: [
          { id: '2-1', label: '新增' },
          { id: '2-2', label: '修改' },
          { id: '2-3', label: '删除' },
          { id: '2-4', label: '查看' }
        ]
      },
      {
        id: '3',
        label: '目的地',
        children: [
          { id: '3-1', label: '新增' },
          { id: '3-2', label: '修改' },
          { id: '3-3', label: '删除' },
          { id: '3-4', label: '查看' }
        ]
      },
      {
        id: '4',
        label: '始发地',
        children: [
          { id: '4-1', label: '新增' },
          { id: '4-2', label: '修改' },
          { id: '4-3', label: '删除' },
          { id: '4-4', label: '查看' }
        ]
      },
      {
        id: '5',
        label: '收货人',
        children: [
          { id: '4-1', label: '新增' },
          { id: '4-2', label: '修改' },
          { id: '4-3', label: '删除' },
          { id: '4-4', label: '查看' }
        ]
      },
      {
        id: '5',
        label: '收货人',
        children: [
          { id: '5-1', label: '新增' },
          { id: '5-2', label: '修改' },
          { id: '5-3', label: '删除' },
          { id: '5-4', label: '查看' }
        ]
      },
      {
        id: '6',
        label: '出货单设置',
        children: [
          { id: '6-1', label: '新增' },
          { id: '6-2', label: '修改' },
          { id: '6-3', label: '删除' },
          { id: '6-4', label: '查看' }
        ]
      },
      {
        id: '7',
        label: '外传城市',
        children: [
          { id: '7-1', label: '新增' },
          { id: '7-2', label: '修改' },
          { id: '7-3', label: '删除' },
          { id: '7-4', label: '查看' }
        ]
      },
      {
        id: '8',
        label: '清关公司',
        children: [
          { id: '8-1', label: '新增' },
          { id: '8-2', label: '修改' },
          { id: '8-3', label: '删除' },
          { id: '8-4', label: '查看' }
        ]
      },
      {
        id: '9',
        label: '分货市场',
        children: [
          { id: '9-1', label: '新增' },
          { id: '9-2', label: '修改' },
          { id: '9-3', label: '删除' },
          { id: '9-4', label: '查看' }
        ]
      },
      {
        id: '10',
        label: '业务底价',
        children: [
          { id: '10-1', label: '新增' },
          { id: '10-2', label: '修改' },
          { id: '10-3', label: '删除' },
          { id: '10-4', label: '查看' }
        ]
      },
      {
        id: '11',
        label: '包装方式',
        children: [
          { id: '11-1', label: '新增' },
          { id: '11-2', label: '修改' },
          { id: '11-3', label: '删除' },
          { id: '11-4', label: '查看' }
        ]
      },
      {
        id: '12',
        label: '货品类型管理',
        children: [
          { id: '12-1', label: '新增' },
          { id: '12-2', label: '修改' },
          { id: '12-3', label: '删除' },
          { id: '12-4', label: '查看' }
        ]
      },
      {
        id: '13',
        label: '汇率管理',
        children: [
          { id: '13-1', label: '新增' },
          { id: '13-2', label: '修改' },
          { id: '13-3', label: '删除' },
          { id: '13-4', label: '查看' }
        ]
      },
      {
        id: '31',
        label: '运输方式',
        children: [
          { id: '31-1', label: '新增' },
          { id: '31-2', label: '修改' },
          { id: '31-3', label: '删除' },
          { id: '31-4', label: '查看' }
        ]
      }
    ]
  },
  {
    id: '14',
    label: '人员管理',
    children: [
      {
        id: '15',
        label: '部门管理',
        children: [
          { id: '15-1', label: '新增' },
          { id: '15-2', label: '修改' },
          { id: '15-3', label: '删除' },
          { id: '15-4', label: '查看' }
        ]
      },
      {
        id: '16',
        label: '员工管理',
        children: [
          { id: '16-1', label: '新增' },
          { id: '16-2', label: '修改' },
          { id: '16-3', label: '删除' },
          { id: '16-4', label: '查看' }
        ]
      },
      {
        id: '17',
        label: '外办员工',
        children: [
          { id: '17-1', label: '新增' },
          { id: '17-2', label: '修改' },
          { id: '17-3', label: '删除' },
          { id: '17-4', label: '查看' }
        ]
      },
      {
        id: '18',
        label: '返佣用户',
        children: [
          { id: '18-1', label: '新增' },
          { id: '18-2', label: '修改' },
          { id: '18-3', label: '删除' },
          { id: '18-4', label: '查看' }
        ]
      },
      {
        id: '19',
        label: '客户管理',
        children: [
          { id: '19-1', label: '新增' },
          { id: '19-2', label: '修改' },
          { id: '19-3', label: '删除' },
          { id: '19-4', label: '查看' }
        ]
      },
      {
        id: '20',
        label: '登录用户管理',
        children: [
          { id: '20-1', label: '新增' },
          { id: '20-2', label: '修改' },
          { id: '20-3', label: '删除' },
          { id: '20-4', label: '查看' }
        ]
      },
      {
        id: '32',
        label: '用户分组',
        children: [
          { id: '32-1', label: '新增' },
          { id: '32-2', label: '修改' },
          { id: '32-3', label: '删除' },
          { id: '32-4', label: '查看' }
        ]
      }
    ]
  },
  {
    id: '21',
    label: '物流管理',
    children: [
      {
        id: '22',
        label: '采购单',
        children: [
          { id: '22-1', label: '新增' },
          { id: '22-2', label: '修改' },
          { id: '22-3', label: '删除' },
          { id: '22-4', label: '查看' },
          { id: '22-5', label: '审核' },
          { id: '22-6', label: '生成采购单' }
        ]
      },
      {
        id: '23',
        label: '入库单',
        children: [
          { id: '23-1', label: '新增' },
          { id: '23-2', label: '修改' },
          { id: '23-3', label: '删除' },
          { id: '23-4', label: '查看' },
          { id: '23-5', label: '审核' },
          { id: '23-6', label: '批量转出库单' },
          { id: '23-7', label: '批量转出库单' }
        ]
      },
      {
        id: '24',
        label: '出库单',
        children: [
          { id: '24-1', label: '新增' },
          { id: '24-2', label: '修改' },
          { id: '24-3', label: '删除' },
          { id: '24-4', label: '查看' },
          { id: '24-5', label: '审核' },
          { id: '24-6', label: '导出' },
          { id: '24-7', label: '导出出库单' },
          { id: '22-6', label: '仓库保存' },
          { id: '22-6', label: '制单保存' }
        ]
      },
      {
        id: '25',
        label: '到货单',
        children: [
          { id: '25-2', label: '修改' },
          { id: '25-3', label: '删除' },
          { id: '25-4', label: '查看' },
          { id: '22-5', label: '审核' },
          { id: '22-5', label: '补充信息' }
        ]
      },
      {
        id: '26',
        label: '清关单',
        children: [
          { id: '26-1', label: '新增' },
          { id: '26-2', label: '修改' },
          { id: '26-3', label: '删除' },
          { id: '26-4', label: '查看' },
          { id: '26-5', label: '审核' },
          { id: '26-6', label: '导入' }
        ]
      },
      {
        id: '29',
        label: '预到货单',
        children: [
          { id: '29-2', label: '修改' },
          { id: '29-3', label: '删除' },
          { id: '29-4', label: '查看' },
          { id: '29-5', label: '审核' }
        ]
      },
      {
        id: '30',
        label: '销售单',
        children: [
          { id: '30-2', label: '修改' },
          { id: '30-3', label: '删除' },
          { id: '30-4', label: '查看' },
          { id: '30-5', label: '审核' },
          { id: '30-6', label: '导出' }
        ]
      }
    ]
  },
  {
    id: '27',
    label: '仓库管理',
    children: [
      {
        id: '28',
        label: '仓库库位',
        children: [
          { id: '28-1', label: '新增' },
          { id: '28-2', label: '修改' },
          { id: '28-3', label: '删除' },
          { id: '28-4', label: '查看' },
          { id: '28-5', label: '查看' }
        ]
      },
      {
        id: '29',
        label: '仓库货物',
        children: [
          { id: '29-1', label: '新增' },
          { id: '29-2', label: '修改' },
          { id: '29-5', label: '详情' },
          { id: '29-3', label: '删除' },
          { id: '29-4', label: '查看' }
        ]
      },
      {
        id: '28',
        label: '仓库地区',
        children: [
          { id: '202', label: '广州' },
          { id: '203', label: '北京' },
          { id: '204', label: '义乌' }
        ]
      }
    ]
  },
  {
    id: '200',
    label: '权限',
    children: [
      {
        id: '201',
        label: '是否可看他人信息'
      }
    ]
  }
])

interface defaultProps {
  id: number
  label: string
  children?: defaultProps[]
}

const treeRef = ref<InstanceType<typeof ElTree>>()
const treeClick = () => {
  let data = treeRef.value!.getCheckedKeys()
  // console.log(data)
  form.rules = data
}
const defaultProps = ref({
  children: 'children',
  label: 'label'
})
//重置tree方法
// resetChecked() {
// this.$refs.tree.setCheckedKeys([])
//     },
//设置tree   this.$refs.tree.setCheckedKeys([]) 数组
// const setCheckedKeys = () => {
//   treeRef.value!.setCheckedKeys([], false)
// }
//获取方法
// getCheckedKeys() {
//         console.log(this.$refs.tree.getCheckedKeys())
//       }
</script>

<template>
  <ElForm :model="form" label-width="auto">
    <ElRow>
      <ElCol :span="8">
        <ElFormItem label-width="150px" label="分组名字">
          <ElInput v-model="form.name" />
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElDivider content-position="left">权限</ElDivider>
    <ElRow>
      <ElCol>
        <ElTree
          :data="adminData"
          show-checkbox
          node-key="id"
          ref="treeRef"
          highlight-current
          :props="defaultProps"
          @check="treeClick"
        />
      </ElCol>
    </ElRow>
    <ElRow v-for="(item, index) in form.wayArr" :key="index">
      <ElCol :span="24">
        <div class="fxy--center">
          <ElDivider />
          <span class="name one">业务底价</span>
          <span class="name two">---</span>
          <span class="name thr">名称：</span>
          <ElInput class="nInput" v-model="item.name" placeholder="请输入" filterable />
          <ElDivider />
        </div>
        <ElRow>
          <ElCol :span="12">
            <ElDivider> 重量 </ElDivider>
            <ElRow v-for="(wItem, wIndex) in item.Zlist" :key="wIndex">
              <ElCol :span="7">
                <ElFormItem label="参考值" label-width="100px">
                  <ElInput v-model="wItem.name" placeholder="请输入" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="7">
                <ElFormItem label="最小值" label-width="100px">
                  <ElInput v-model="wItem.min" placeholder="请输入" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="7">
                <ElFormItem label="最大值" label-width="100px">
                  <ElInput v-model="wItem.max" placeholder="请输入" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="2" :offset="1">
                <ElButton
                  v-if="wIndex == 0"
                  type="primary"
                  circle
                  :icon="addIcon"
                  size="small"
                  @click="addWayListItem(index, wIndex, 'Zlist')"
                />
                <ElButton
                  v-else
                  type="warning"
                  circle
                  :icon="delIcon"
                  size="small"
                  @click="removeWayListItem(index, wIndex, 'Zlist')"
                />
              </ElCol>
            </ElRow>
          </ElCol>
          <ElCol :span="12">
            <ElDivider> 体积 </ElDivider>
            <ElRow v-for="(wItem, wIndex) in item.Tlist" :key="wIndex">
              <ElCol :span="7">
                <ElFormItem label="参考值" label-width="100px">
                  <ElInput v-model="wItem.name" placeholder="请输入" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="7">
                <ElFormItem label="最小值" label-width="100px">
                  <ElInput v-model="wItem.min" placeholder="请输入" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="7">
                <ElFormItem label="最大值" label-width="100px">
                  <ElInput v-model="wItem.max" placeholder="请输入" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="2" :offset="1">
                <ElButton
                  v-if="wIndex == 0"
                  type="primary"
                  circle
                  :icon="addIcon"
                  size="small"
                  @click="addWayListItem(index, wIndex, 'Tlist')"
                />
                <ElButton
                  v-else
                  type="warning"
                  circle
                  :icon="delIcon"
                  size="small"
                  @click="removeWayListItem(index, wIndex, 'Tlist')"
                />
              </ElCol>
            </ElRow>
          </ElCol>
        </ElRow>
      </ElCol>
    </ElRow>
  </ElForm>
</template>
<style scoped lang="less">
.fxy--center {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.name {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  &.two {
    margin: 0 10px;
  }
  &.one {
    margin-left: 10px;
  }
  &.thr {
    margin-right: 10px;
  }
}

.nInput {
  margin-right: 10px;
}
.listForItem {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .el-col:nth-of-type(2) {
    font-size: var(--el-form-label-font-size);
    padding: 0 15px;
  }
  .el-col:nth-of-type(1) {
    padding-right: 15px;
  }
  .el-col:nth-of-type(6) {
    padding-left: 15px;
  }
  .el-divider--horizontal {
    margin: 0;
  }
  .el-form-item--default {
    margin-bottom: 0;
  }
}
</style>
